import React from "react";

class FnClass extends React.Component {
  state = {
    name: "张三",
    age: 18,
    info: {
      sex: "男",
      hobby: ["篮球", "足球", "排球", "羽毛球"],
    },
  };

  addHobby(e) {
    this.setState(
      {
        info: {
          ...this.state.info,
          hobby: [...this.state.info.hobby, e],
        },
      },
      () => {
        console.log(this.state.info.hobby);
      }
    );
  }

  clear = () => {
    this.setState({
      info: {
        ...this.state.info,
        hobby: [],
      },
    });
  };

  render() {
    console.log("render");
    return (
      <div>
        <div>
          列表循环案例：
          {this.state.info.hobby &&
            this.state.info.hobby.map((item) => {
              return <div key={item}>{item}</div>;
            })}
        </div>

        <button onClick={this.addHobby.bind(this, Math.random() * 10)}>
          添加爱好
        </button>
        <button onClick={this.clear}>清空</button>
        {/* <button onClick={(e) => this.addHobby(e.target.value)}>添加爱好</button>
        <input type="text" /> */}
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <FnClass></FnClass>
    </div>
  );
}

export default App;
